<template>
  <div class="tabbar">
    <transition mode="out-in" name="zdy" appear>
        <component :is="com[currentIndex]"></component>
    </transition>

    <ul>
        <li 
            v-for="(item,index) in tabList" :key="index"
            @click="jump(index)"
        >
            <img :src='currentIndex == index ? item.selected : item.imgurl' alt="">
            <span :class='{active : currentIndex == index}'>{{item.text}}</span>
        </li>

    </ul>
  </div>
</template>

<script>
import Home from '../components/home/Home.vue'
import Tuan from '../components/tuan/Tuan.vue'
import My from '../components/my/My.vue'
import Order from '../components/order/Order.vue'

export default {
    data(){
        return{
            currentIndex:0,
            tabList:[
                {
                    imgurl:'images/home.png',
                    selected:'images/home-select.png',
                    text:'首页'
                },
                {
                    imgurl:'images/list.png',
                    selected:'images/list-select.png',
                    text:'爆爆团'
                },
                {
                    imgurl:'images/cart.png',
                    selected:'images/cart-select.png',
                    text:'订单'
                },
                {
                    imgurl:'images/my.png',
                    selected:'images/my-select.png',
                    text:'我的'
                }
            ],
            com:[Home,Tuan,Order,My]
        }
    },
    methods:{
        jump(index){
            this.currentIndex = index
        }
    }

}
</script>

<style lang="scss" scoped>
ul{
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ccc;
    
    li{
        // background: blue;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        img{
            width: 30px;
        }
        span{
            font-size: 14px;
        }
    }
}
.active{
    color: red;
}
// 入场动画
  .zdy-enter{  // 动画开始时的状态
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  .zdy-enter-active{ // 
    transition: all 1s;
  }
  .zdy-enter-to{ // 动画结束时的状态
    opacity: 1 ;
    transform: scale(1) rotate(-360deg);
  }
  // 离场动画
  .zdy-leave{ // 动画开始时的状态
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  .zdy-leave-active{
    transition: all 1s;
  }
  .zdy-leave-to{ //动画结束时的状态
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
</style>